<script setup>
  import { computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { receiveCouponApi } from '@/api'
  import { message } from "ant-design-vue";
  const router = useRouter()
  const props = defineProps(['coupon', 'type'])
  const emit = defineEmits(['receiveSuccess'])
  // 领取优惠券
  const receiveCoupon = (coupon) => {
    const { id, my_coupon_status, status } = props.coupon
    // 领取优惠券
    if (props.type === 'receive' && my_coupon_status === 0) {
      receiveCouponApi({coupon_id: id}).then(() => {
        message.success('领取成功')
        emit('receiveSuccess')
      })
    }
    // 去使用
    if (props.type === 'my' && status === 0) {
      router.push({ name: 'cart' })
    }
  }
  const status = computed(() => {
    let label
    // 领取优惠券页面组件
    if (props.type === 'receive') {
      switch (props.coupon.my_coupon_status) {
        case 0:
          label = '立即领取'
          break
        case 1:
          label = '待使用'
          break
        case 2:
          label = '已过期'
          break
        case 3:
          label = '已使用'
          break
      }
    } else {
      switch (props.coupon.status) {
        case 0:
          label = '待使用'
          break
        case 1:
          label = '已过期'
          break
        case 2:
          label = '已使用'
          break
      }
    }
    return label
  })
  const disabled = computed(() => {
    let bool
    if (props.type === 'receive' && (props.coupon.my_coupon_status === 2 || props.coupon.my_coupon_status === 3)) bool = true
    if (props.type === 'my' && props.coupon.status !== 0) bool = true
    return bool
  })
</script>

<template>
  <div class="coupon" :class="disabled ? 'disabled' : ''">
    <div class="coupon-info">
      <div class="c-price" v-if="coupon.type === 'discount'">
        <div class="price"> {{ coupon.discount }} </div>
        <div class="dw"> 折 </div>
      </div>
      <div class="c-price" v-else>
        <div class="dw"> ￥ </div>
        <div class="price"> {{ coupon.reduce_price }} </div>
      </div>
      <div class="c-name"> {{ coupon.name }} </div>
      <div class="tj"> 满 {{ coupon.full_price }} 可用 </div>
      <div class="c-time" v-if="coupon.start_time"> {{ coupon.start_time }} <i class="fa-solid fa-minus"></i> {{ coupon.end_time }} </div>
    </div>
    <div class="c-btn">
      <div class="btn" @click="receiveCoupon(coupon)">  {{ status }} </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.coupon {
  width: 150px;
  display: inline-flex;
  flex-direction: column;
  background: linear-gradient(var(--primary), #f22);
  margin-right: 10px;
  border-radius: 10px;
  &.disabled {
    cursor: not-allowed;
    background: linear-gradient(#f8f8f8, #eee);
    .c-price {
      color: #aaa !important;
    }
    .btn {
      color: #999 !important;
      border-color: #999 !important;
      background-color: #e5e5e5 !important;
    }
  }
  .coupon-info {
    min-height: 160px;
    flex: 1;
    gap: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 10px 10px 0;
    background-color: #fff;
    border-radius: 10px;
    .c-price {
      color: #D80303;
      font-size: 35px;
      font-weight: bold;
      display: flex;
      align-items: end;
      margin-top: 10px;
      .dw {
        font-size: 14px;
      }
      .price {
        line-height: 35px;
      }
    }
    .c-name {
      font-size: 16px;
      font-weight: bold;
    }
    .c-time {
      color: #999;
      font-size: 10px;
      margin-bottom: 5px;
    }
    .c-name, .tj {
      white-space: wrap;
      text-align: center;
    }
  }
  .c-btn {
    padding: 10px 12px;
    .btn {
      color: #fff;
      padding: 3px 0;
      font-weight: bold;
      text-align: center;
      border-radius: 20px;
      background-color: #f22;
      border: 3px solid sandybrown;
      transition: all .3s ease-in-out;
      &:hover {
        cursor: pointer;
        background-color: #f40;
      }
    }
  }
}
</style>